{% layout = "base.html" %}

{-title-}Profile{-title-}

{-content-}
<div class="row" id="user_profile">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-6">
        <form method="POST" v-on:submit.prevent>
            <div class="form-group">
                <h3>Profile</h3>
                <br>
            </div>
            <div class="form-group row">
                <label for="inputName" class="col-sm-4 col-form-label">Name</label>
                <div class="col-sm-8">
                    <input readonly type="text" class="form-control-plaintext" id="inputName" v-bind:value="name">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputCreateDate" class="col-sm-4 col-form-label">Member since</label>
                <div class="col-sm-8">
                    <input readonly type="text" class="form-control-plaintext" id="inputCreateDate" v-bind:value="createDate">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputEmail" class="col-sm-4 col-form-label">Email address</label>
                <div class="col-sm-8">
                    <input v-model="email" type="email" class="form-control" id="inputEmail" placeholder="Email address">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-sm-4 col-form-label">Confirm password</label>
                <div class="col-sm-8">
                    <input v-model="password" type="password" class="form-control" id="inputPassword" placeholder="Confirm password to change profile">
                </div>
            </div>
            <!-- <div class="form-group row">
                <label for="inputLocation" class="col-sm-4 col-form-label">Location</label>
                <div class="col-sm-8">
                    <input name="location" type="text" class="form-control" id="inputLocation" placeholder="Location">
                </div>
            </div> -->
            <div v-if="error" class="form-group alert alert-danger" role="alert">
                [[ error ]]
            </div>
            <div v-if="info" class="form-group alert alert-info" role="alert">
                [[ info ]]
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <button v-on:click="updateProfile()" class="btn btn-primary">Update profile</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-3">
    </div>
</div>

<script type="text/javascript">

var profile = {* profile *};

profile.password = '';
profile.error = '';
profile.info = '';

var profileApp = new Vue({
	delimiters: ['[[', ']]'],
  	el: '#user_profile',
  	data: profile,
	methods: {
        updateProfile(event) {
            if (!validateEmail(this.email)) {
                this.error = 'Please input valid email address.';
                return false;
            }

            if (!this.password) {
                this.error = 'Please input password.';
                return;
            }

            this.error = '';
            this.info = '';

            var thiz = this;
            axios.post('/user/profile', {
                email: this.email,
                password: this.password,
            })
            .then(function (response) {
                thiz.error = response.data.error;
                if (!thiz.error) {
                    thiz.info = 'Profile was updated successfully.';
                }
            })
            .catch(function (error) {
                console.log(error);
            });
		},
  	}
});

</script>

{-content-}

